<template>
  <div class="0">
    <div class="1" style="margin-bottom: 15px">
      <el-input style="width: 200px" v-model="params.userName" placeholder="请输入用户名称"></el-input>
      <el-input style="margin-left: 10px;width: 200px" v-model="params.grade" placeholder="请输入年级"></el-input>
      <el-input style="margin-left: 10px;width: 200px" v-model="params.classes" placeholder="请输入班级"></el-input>
      <el-button type="info" style="margin-left: 10px" plain @click="findBySearch()">查询</el-button>
      <el-button type="warning" style="margin-left: 10px" plain @click="reset()">清空</el-button>
      <el-button type="primary" style="margin-left: 10px" plain @click="add()"v-if="user.role==='管理员'">新增</el-button>
      <el-popconfirm title="确定删除这些数据吗？" @confirm="delBatch()">
        <el-button slot="reference" size="mini" type="danger" style="float: right;margin-left: 10px" v-if="user.role==='管理员'">批量删除</el-button>
      </el-popconfirm>
      <el-button slot="reference" size="mini" type="success" style="float: right;margin-left: 10px" plain @click="exp()" >导出成绩</el-button>
    </div>
    <div class="container">
      <div class="table-container">
        <el-table
            :data="tableData"
            :fit="isfit"
            stripe
            row-key="id"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55"
              :reserve-selection="true"
              v-if="user.role==='管理员'">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="用户名称"
              width="80">
          </el-table-column>
          <el-table-column
              prop="grade"
              label="年级"
              width="80">
          </el-table-column>
          <el-table-column
              prop="classes"
              label="班级"
              width="80">
          </el-table-column>
          <el-table-column
              prop="grades"
              label="成绩"
              width="80">
          </el-table-column>
          <el-table-column label="操作"v-if="user.role==='管理员'">
            <template v-slot:default="scope">
              <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
                <el-button slot="reference" size="mini" type="danger" style="margin-left: 10px">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <div  class="chart-container">
      <div id="rose" style="width: 100%;height: 600px"></div>
    </div>
    </div>
    <div class="block" style="margin-top: 15px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="请输入信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form">
          <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-select v-model="form.userId" placeholder="请选择">
              <el-option
                  v-for="item in typeObjs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成绩" :label-width="formLabelWidth">
            <el-input v-model="form.grades" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  data() {
    return {
      params:{
        userName:'',
        grade:'',
        classes:'',
        pageNum: 1,
        pageSize: 10
      },
      isfit:false,
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form:{},
      formLabelWidth:"20%",
      typeObjs:[],
      multipleSelection: [],
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },
  created() {
    this.findTypes();
    this.findBySearch();
  },
  mounted() {
    this.$nextTick(() => {
      this.intiEcharts(); // 确保拼写正确
    });
  },
  methods:{
    exp(){
      let user = localStorage.getItem("user");
      location.href='http://localhost:8080/zcy/grades/export?token='+ JSON.parse(user).token;
    },
    intiEcharts(){
      request.get("/grades/echarts/rose",{
        params: this.params
      }).then(res => {
        if (res.code === '0'){
          console.log(res.data)
          this.intiRose(res.data);
        }else{
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    intiRose(data){
      let chartDom = document.getElementById('rose');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '成绩分布',
          left: 'center'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    findTypes(){
      request.get("/admin").then(res=>{
        if (res.code === '0'){
          this.typeObjs = res.data;
        }else{
          this.$message.error({
            message: '无图片！',
            type: 'error'
          })
        }
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    delBatch(){
      if(this.multipleSelection.length==0){
        this.$message.warning("请选择要删除的数据!")
        return
      }
      request.put("/grades/delBatch",this.multipleSelection).then(res=>{
        if(res.code==='0'){
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.findBySearch();
        }else {
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    findBySearch(){
      request.get("/grades/search",{
        params: this.params
      }).then(res => {
        if (res.code === '0'){
          // console.log(res.data.list);
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.intiEcharts();
        }else{
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    edit(obj){
      obj.userId=obj.userName;
      this.form=obj;
      this.dialogFormVisible=true;
    },
    add(){
      this.form= {};
      this.dialogFormVisible=true;
    },
    reset(){
      this.params = {
        userName:'',
        grade:'',
        classes:'',
        pageNum: 1,
        pageSize: 10
      }
      this.findBySearch();
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum){
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    submit(){
      request.post("/grades",this.form).then(res=>{
        if(res.code==='0'){
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.dialogFormVisible=false;
          this.findBySearch();
        }else {
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    del(id){
      request.delete("/grades/"+id).then(res=>{
        if(res.code == '0'){
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.findBySearch();
        }else{
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style>
/* 修复容器样式 */
.container {
  display: flex;
  gap: 20px;
  height: 600px; /* 关键！为父容器设置明确高度 */
}

.chart-container {
  flex: 1;
  position: relative; /* 确保子元素能正确继承尺寸 */
}

#rose {
  width: 100%;
  height: 100%;  /* 继承父容器高度 */
  min-height: 400px; /* 防止内容过小时折叠 */
}
</style>
